@prefix-cls: ~'@{namespace}-screen';

.@{prefix-cls} {
  &--box {
    width: 100%;
    color: #fff;
    background-color: rgba(5, 19, 54, 1);
    height: 100%;
    overflow: auto auto;
    position: relative;

    .full-screen-box {
      height: 100%;
      width: 100%;
      min-height: 810px;
      min-width: 1440px;
      background-image: url(@/assets/images/screen/screen-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0 2.6%;
    }

    // .map1-bg {
    //   background: url(@/assets/images/screen/map1.jpg) no-repeat center center !important;
    //   //  background-size: 100% auto !important;
    // }

    .fullscreenBtn {
      position: absolute;
      top: 10px;
      right: 15px;
      z-index: 2;
    }

    .mini-divider {
      margin: 10px 0 !important;
    }

    .large-grid-box {
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: clamp(83px, 7.8vh, 111px) auto clamp(50px, 5.56vh, 67px);
      grid-template-areas:
        'g-header'
        'g-center'
        'g-footer';
      grid-gap: 0;
      height: 100%;
    }

    .g-header {
      grid-area: g-header;
      overflow: hidden;
      //  background: red;
      // background-size: auto 66px;
      text-align: center;
      position: relative;
      padding: 0 2.6%;
      z-index: 1;
      // align-content: center;
      justify-content: center;

      .header-img {
        img {
          display: block;
          width: 33%;
          max-width: 523px;
          min-width: 392px;
          margin: 0 auto 10px;
          // margin: 10px auto 0;
          // height: 36px;
        }
      }

      .header-right {
        position: absolute;
        z-index: 1;
        left: 20px;
        top: 30px;
      }
    }

    .g-center {
      grid-area: g-center;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: auto;
      grid-template-areas: 'center-left center-left center-left center-left center-center center-center center-center center-center center-center center-center  center-center center-center  center-right center-right center-right center-right';
      grid-gap: 0 18px;
      height: 100%;

      .center-right {
        grid-area: center-right;
        overflow: hidden;
        background-size: 100% 100%;
        position: relative;
        z-index: 1;
      }

      .center-left {
        grid-area: center-left;
        overflow: hidden;
        background-size: 100% 100%;
        position: relative;
        z-index: 1;
      }

      .center-center {
        grid-area: center-center;
        overflow: hidden;
        background-size: 100% 100%;
      }
    }

    .g-center-tow {
      width: 100;
      height: 100%;
      display: block;
    }

    .g-footer {
      grid-area: g-footer;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3%;
      position: relative;
      z-index: 1;

      .footer-btn {
        display: block;
        font-weight: bold;
        font-size: clamp(15px, 1.04vw, 20px);
        line-height: 1;
        cursor: pointer;
        background: linear-gradient(90deg, #f6fbff 0%, #9bd2fb 100%);
        /* 渐变方向和颜色 */
        -webkit-background-clip: text;
        /* 兼容WebKit浏览器 */
        background-clip: text;
        color: transparent;
        transition: all 0.3s;

        /* 确保背景裁剪正确 */
        .btn-icon {
          font-size: clamp(10px, 0.05vw, 12px);
          vertical-align: 1px;
          color: #07faa2;
          transition: all 0.3s;
        }
      }
      .footer-item {
        background: url(@/assets/images/screen/footer-1.png) no-repeat center bottom;
        background-size: 100% auto;
        padding-left: 46px;
        padding-right: 46px;
        padding-bottom: 9px;
        padding-top: 4px;
      }
      .action-footer {
        background: url(@/assets/images/screen/footer-2.png) no-repeat center bottom;
        background-size: 100% auto;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 9px;
        padding-top: 4px;
      }
      .action-btn {
        font-size: clamp(20px, 1.35vw, 26px);
        line-height: 1;
        transition: all 0.3s;

        .btn-icon {
          vertical-align: 2px;
          color: #ffd523;
          transition: all 0.3s;
        }
      }
    }

    // 头部样式
    .date {
      font-size: 14px;
      vertical-align: 2px;
    }

    .timer {
      font-size: 24px;
      margin-right: 20px;
    }

    .side-item {
      height: 100%;
      overflow: hidden;

      .side-title {
        height: 26px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .side-content {
        height: calc(100% - 26px);
        padding: 0 19px;
        background: linear-gradient(180deg, #061c48 0%, rgba(8, 41, 82, 0) 100%);
        display: flex;
        align-items: center;
        // overflow: hidden;
      }
    }
  }

  @media screen and (max-width: 1450px) {
    &--box {
      .small-num-to-12 {
        font-size: 12px !important;
      }

      .small-num-to-14 {
        font-size: 14px !important;
      }

      .small-num-to-16 {
        font-size: 16px !important;
      }

      .small-text-to-10 {
        font-size: 10px !important;
      }

      //  background-image: url(@/assets/images/screen/screen-bg2.png);
      .sector-box-item {
        &:not(:last-child) {
          margin-bottom: 4px !important;
        }
      }
    }
  }
  .p-relative {
    position: relative;
  }
}
